<div id="app" class="text-center">
    <b-dropdown text="Dropdown Button sm" size="sm" class="m-md-2">
        <b-dropdown-item href="#">Action</b-dropdown-item>
        <b-dropdown-item href="#">Another action</b-dropdown-item>
        <b-dropdown-item href="#">Something else here</b-dropdown-item>
    </b-dropdown>

    <br>
    <br>

    <b-dropdown text="Split Dropdown Button" variant="success" split class="m-md-2">
        <b-dropdown-item href="#">Action</b-dropdown-item>
        <b-dropdown-item href="#">Another action</b-dropdown-item>
        <b-dropdown-item href="#">Something else here...</b-dropdown-item>
    </b-dropdown>

    <br>
    <br>

    <b-dropdown text="Right align" variant="warning" right class="m-md-2">
        <b-dropdown-item href="#">Action</b-dropdown-item>
        <b-dropdown-item href="#">Another action</b-dropdown-item>
        <b-dropdown-item href="#">Something else here</b-dropdown-item>
    </b-dropdown>

    <br>
    <br>

    <b-dropdown text="Drop-Up" dropup variant="info" class="m-md-2">
        <b-dropdown-item href="#">Action</b-dropdown-item>
        <b-dropdown-item href="#">Another action</b-dropdown-item>
        <b-dropdown-item href="#">Something else here</b-dropdown-item>
    </b-dropdown>

    <br>
    <br>

    <b-dropdown text="Link" variant="info" class="m-md-2" link>
        <b-dropdown-item href="#">Action</b-dropdown-item>
        <b-dropdown-item href="#">Another action</b-dropdown-item>
        <b-dropdown-item href="#">Something else here</b-dropdown-item>
    </b-dropdown>

</div>
